$(function () {
    // 获取目标元素
    var $lists = $(".img_lists");
    console.log($lists);
    // 每次移动的距离
    var pageItme = -1920;
    // 每次移动的总时间
    var Time = 500;
    // 间隔的时间
    var ITEM_TIME = 25;
    // 单位移动的距离(96px)
    var ITEM_PAGE = pageItme / (Time / ITEM_TIME);
    // 获取当前的偏移量
    var currentPage;
    // 获取按钮
    var $squares = $(".square span");
    // 获取图片的数量
    var imgCount = $squares.length;//5
    // 设置当前元素的下标
    var index = 0;
    var targetIndex = 0;

    // //实现自动轮播的轮播的功能
    // this.intervalID = setInterval(function(){
    //     clearInterval(this.intervalID)
    //     nextPage()
    // },4000);
    function nextPage() {
        // 获取当前的偏移量
        currentPage = Math.floor($lists.position().left)
           //得到目标元素的偏移量
       var targetPage = currentPage + pageItme;
        // console.log(currentPage);
         var IntervalId = setInterval(function () {
            // 更新当前元素的偏移量
            currentPage += ITEM_PAGE;
            if(currentPage === targetPage){
                clearInterval(IntervalId)
            }
            if(currentPage === pageItme * (imgCount+1) ){
                currentPage = pageItme;
            }
            $lists.css({"left":currentPage}) 
        },ITEM_TIME);
        // 调用更新原点的函数
        updatePoint()
    };
    // 更新原点
    function updatePoint(){
        $squares[index].classList.remove("active");
            targetIndex++
        if(targetIndex > imgCount-1){
            targetIndex = 0
        }
        index = targetIndex
        $squares[targetIndex].classList.add("active")
    }
})